<template>
  <v-box :title="type==2 ? '便携式小盒子':'服务器'">
    <view class="cbox" style=" height: 100%;">
      <v-center style="height: 100%">
        <template #head>
          <v-center
            style="
              min-height: 70px;
              height: auto;
              background: #f3f3f3;
              padding: 0 15px;
            "
            class="form_search"
            :row="true"
          >
            <template #head>
              <template v-if="type===2">
                <n-form-item label="姓名" label-placement="left"  style="min-width:150px;width:150px">
                  <n-input v-model:value="searchData.uname" placeholder="输入姓名" clearable/>
                </n-form-item>
                <view style="width: 15px"></view>

                <n-form-item label="工号" label-placement="left"  style="min-width:50px;">
                  <n-input-number :show-button="false" v-model:value="searchData.unumber"  placeholder="输入工号" clearable />
                </n-form-item>
                <view style="width: 15px"></view>
                <n-form-item label="部门" label-placement="left"  style="min-width:50px;">
                  <n-input v-model:value="searchData.upart" placeholder="输入部门" clearable/>
                </n-form-item>
              </template>

              <view style="width: 15px"></view>   

              <n-form-item label="添加时间" label-placement="left"  style="width:430px;">
                <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
                  <n-date-picker v-model:value="searchData.startDate" type="daterange" clearable />
                </n-config-provider>
              </n-form-item>
              <view style="width: 15px"></view>      
            </template>
            <template #end>
              <!-- <n-button  @click="test" ghost color="#2f9385" style="margin-right: 15px">
                test
              </n-button> -->
              <n-button  @click="searchInput" ghost color="#2f9385" style="margin-right: 15px">
                <template #icon>
                  <icon :icon="['fal', 'search']"></icon>
                </template>
                搜索
              </n-button>
              <n-button color="#2f9385" @click="showModal = true">
                <template #icon>
                  <icon :icon="['fal', 'plus']"></icon>
                </template>
                添加设备
              </n-button>
            </template>
          </v-center>
        </template>
        <template #center>
          <v-center style="height: 100%; padding-top: 15px">
            <template #center>
              <table-show
                :tableData="table_data"
                :columns="columns"
                :pageNum="pageNum"
                :pageSize="pageSize"
                :totalPages="totalPages"
                :loading="loading"
                @getCPage="getCPage"
                @getPageSize="getPageSize"
              />
            </template>
          </v-center>
        </template>
      </v-center>
    </view>
  </v-box>
  <n-modal v-model:show="showModal1">
    <view style="width:450px; height: 230px;background:#fff;">
      <VBox :title="'提醒'">
        <VCenter :row="true">
          <template #center>
            <!-- <view>口令</view> -->
            <view style="width:10px;"></view>
            <view style="padding:0 10px;background:#e6dbdb;color:#00aa00;">{{initkey}}</view>
            <view style="width:10px;"></view>
            <!-- <n-button size="tiny" dashed>点击复制</n-button> -->
          </template>
        </VCenter>
        <VCenter >
          <template #head>
            <view style="padding-top: 15px">需要将当前<span style="color: #e60505;padding: 0 5px;">口令</span>发送给用户</view>
            <view style="height:20px;"></view>
            <n-button type="primary" @click="close1">关闭</n-button>
          </template>
        </VCenter>
      </VBox>
    </view>
  </n-modal>  
  <!-- modal -->
  <n-modal v-model:show="showModal" style="min-width:200px;max-width:600px;width:600px;">
    <v-box :title="type==2 ? '添加便携式小盒子':'添加服务器'" style="min-height:300px;height:auto;">
      <n-form
        :model="BinssUser"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
        :style="{
          maxWidth: '100%'
        }"
      >
      <VCenter>
        <template #head>          
         
          <template v-if="type==2">
            <VCenter :row="true">
              <template #head >
                <n-form-item label="用户名" path="BUName">
                  <n-input placeholder="输入用户姓名" v-model:value="BinssUser.BUName" />
                </n-form-item>
               
              </template>
              <template #end>
               <n-form-item label="用户工号" path="BNumber" >
                  <n-input-number placeholder="请输入用户工号" :show-button="false"  v-model:value="BinssUser.BNumber" />
                </n-form-item>
              </template>
            </VCenter>
          </template>
          <VCenter :row="true">
            <template #center>
              <n-form-item label="所属单位" path="BUnit" style="width:100%">
                <n-input placeholder="请输入所属单位" v-model:value="BinssUser.BUnit" />
              </n-form-item>
            </template>            
          </VCenter>
          <template v-if="type==2">
            <VCenter :row="true">
              <template #center>
                <n-form-item label="所属部门" path="BDparment" style="width:100%">
                  <n-input placeholder="请输入所属部门" v-model:value="BinssUser.BDparment" />
                </n-form-item>
              </template>            
            </VCenter>
          </template>
          
          <VCenter :row="true">
            <template #center>
              <n-form-item label="备注" path="BRemark" style="width:100%">
                <n-input placeholder="请输出备注" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" v-model:value="BinssUser.BRemark" />
              </n-form-item>
            </template>            
          </VCenter>
          <VCenter>
            <template #head>
              <n-button @click="handleValidateButtonClick" type="primary" >
                添加
              </n-button >
            </template>
          </VCenter>
        </template>
      </VCenter>
      </n-form>
    </v-box>
  </n-modal>
</template>
<script>
import VBox from "@/components/scraw/VBox.vue";
import VCenter from "@/components/scraw/VCenter.vue";
import TableShow from "@/components/form/TableShow.vue";
import { getCurrentInstance, ref } from 'vue'
import {zhCN, dateZhCN} from "naive-ui"
export default {
  components: {
    VBox,
    VCenter,
    TableShow
  },
  props:['type'],
  data() {
    return {
      search: "",
      table_data: [],
      pageNum: 1,
      pageSize: 10,
      totalPages: 0,
      loading: true,
      searchData:{
        uname: null,
        unumber: null,
        upart: null,
        startDate:null, 
      },
      showModal: false,
      showModal1: false,
      initkey: null,
      BUName:null,
      rules: {
        BUName: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入 用户名'
        },
        BNumber: {
          type:'number',
          required: true,
          trigger: ['blur', 'change'],
          message: '请输入 用户编号'
        }, 
        BDparment: {
          required: false,
          trigger: ['blur', 'input'],
          message: '请输入 所在部门'
        },
        BMouKey: {
          required: true,
          trigger: ['blur', 'input'],
          message: '请输入 设备口令'
        },
        BUnit: {
          required: true,
          trigger: ['blur', 'input'],
          validator(rule, value) {
            if(!value) {
              return new Error("需要输入单位名称") 
            }
            if(value && value.length > 10) {
               return new Error("单位名称不能超过十个字符") 
            }
          }
        },
      },
    };
  },
  methods: {    
    searchInput() {
      this.getDevice()
    },
    getCPage(pageNum) {
      this.pageNum = pageNum;
      this.getDevice()
    },
    getPageSize(pagesize) {
      this.pageSize = pagesize;
      this.getDevice()
    },
    test() {
      this.$ElMessage.success({message:'good',duration: 100000 })
    }
  },
  mounted() {
    this.getDevice();
  },
  setup(proxy) {
    var columns = []
    if(proxy.type == 2) {
      columns =  [
        { title: "用户名", key: "BUName" },
        { title: "工号", key: "BNumber" },
        { title: "所属单位", key: "BUnit" },
        { title: "所属部门", key: "BDparment" },
        { title: "添加用户", key: "BAddUName" },
        { title: "添加时间", key: "BAddTime" },
        { title: "备注", key: "BRemark" },
        { title: "设备口令", key: "BMouKey" },
      ]
    }else {
       columns =  [
        // { title: "用户名", key: "BUName" },
        // { title: "工号", key: "BNumber" },
        { title: "所属单位", key: "BUnit" },
        // { title: "所属部门", key: "BDparment" },
        { title: "添加用户", key: "BAddUName" },
        { title: "添加时间", key: "BAddTime" },
        { title: "备注", key: "BRemark" },
        { title: "设备口令", key: "BMouKey" },
      ]
    }
    const { proxy: cthis } = getCurrentInstance();
    const formRef = ref(null)
    var BinssUser = ref({
        BUName:null,
        BNumber:null,
        BMouKey:null,
        BDeviceType: proxy.type==2?2:1,
        BUnit:null,
        BDparment:null,
        BRemark:null,
        OperType:'add',
        BAddUHId:cthis.$userInfo.UHID,
        BUpdUHId:cthis.$userInfo.UHID
      })
    var getDevice = function (succes) {
      /** 禁用 http 模式的默认加载提醒 */
      // this.$default_hloading.isload = false
      this.loading = true
      this.$http
        .get("getBinssUser", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            type:  this.type,

            uname: this.searchData.uname,
            unumber: this.searchData.unumber,
            upart: this.searchData.upart,
            startDate: !this.searchData.startDate ? null:this.searchData.startDate[0],
            endDate: !this.searchData.startDate ? null:(this.searchData.startDate[1] + ( 24*60*60 - 1)* 1000),
          },
        })
        .then((res) => {
          this.table_data = res.data.msg.data;
          this.totalPages = res.data.msg.size;
          if(succes) succes(this)
        }).catch(()=>{
          this.table_data = [];
        }).finally(()=>{
          this.loading = false
        });
    }
    return {
      zhCN, dateZhCN, columns, BinssUser, formRef, getDevice, handleValidateButtonClick (e) {
        e.preventDefault()
        formRef.value.validate((errors) => {
          if (!errors) {
            cthis.$http.post("addBinssUser", BinssUser.value, {headers:{
              "Content-Type":"application/json"
              // "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
            }}).then((res) => {
              // cthis.getDevice() //重新调用查询方法
              // console.log(res)
              cthis.initkey = res.data.msg
              cthis.showModal = false;
              cthis.showModal1 = true;
              // cthis.$parent.ckey = cthis.$parent.ckey + 1  //重新加载组件
            }).catch(err=>{console.log(err)});
          } else {
            console.log(errors)
          }
        })
      }, close1(){
        cthis.$parent.ckey = cthis.$parent.ckey + 1  //重新加载组件
      }
    }
  },
};
</script>